<template>
  <!-- 搜索框 -->
  <view class="cu-bar search bg-white">
    <view class="search-form round">
      <!-- 这些class可以在   src/styles/icons.scss   中找到 -->
      <text class="cuIcon-search"></text>
      <input
        v-model="searchtext"
        :adjust-position="false"
        type="text"
        placeholder="搜索帖子"
        class="search-input"
        @input="onInput"
        @confirm="onConfirm"
        confirm-type="search"
        @tap="onTap"
      />
    </view>
    <view class="action">
      <button class="cu-btn bg-red shadow-blur round" @tap="clickSearch1" v-if="pduan">搜索</button>
      <button class="cu-btn bg-red shadow-blur round" @tap="clickSearch11" v-else>返回</button>
    </view>
  </view>
  <template v-if="pduan">
    <!-- 搜索历史 -->
    <view class="lishi">搜索历史</view>
    <view class="jieguo">
      <view
        class="shuju"
        v-for="(item, index) in list"
        hover-class="yans"
        :key="index"
        @tap="clickHistorySearch(item)"
      >{{ item.keyword }}</view>
    </view>
  </template>
  <template v-else-if="listjieguo.length > 0 && !pduan">
    <block v-for="(item, index) in listjieguo" :key="index">
      <commonList
        :index="index"
        :item="item"
        @follow="follow"
        @doSupport="doSupport"
        :isdetail="false"
        :isgeren="true"
      ></commonList>
    </block>
  </template>
  <template v-else>
    <!-- 空白页组件 -->
    <noThing></noThing>
  </template>
</template>

<script lang="ts" setup>
import { guanzhuStore, myStore } from '@/stores'
import noThing from '@/components/common/noThing.vue'
const user = myStore()
const demo = [
  {
    title: '标题',
    content: '内容',
    time: '2021-01-01',
    img: '../../static//images/loading 加载中_爱给网_aigei_com.gif',
    isfollow: false,
    name: '名称',
    support: {
      type: '',
      support_count: 1,
      unsupport_count: 2,
    },
    comment_count: 2,
    share_num: 2,
  },
  {
    title: '标题',
    content: '内容',
    time: '2021-01-01',
    img: '../../static//images/loading 加载中_爱给网_aigei_com.gif',
    isfollow: false,
    name: '名称',
    support: {
      type: 'support',
      support_count: 1,
      unsupport_count: 2,
    },
    comment_count: 2,
    share_num: 2,
  },
]
import { ref } from 'vue'
import commonList from '@/components/common-list/index'
import { getsearchAPI, getsearchhaoyouAPI, getsearchshequAPI } from '@/services/shequ'
import { onLoad, onShow } from '@dcloudio/uni-app'
// 返回社区页面
const clickSearch = () => {
  uni.navigateTo({
    url: '../../pages/category/category',
  })
}
// 遍历历史数据
const list = ref<any>(['uniapp第二季开发实战', '我们一起学习一起进步', '加油一起干'])
const pduan = ref(true)
// 监听输入框的数据
const keyword = ref('')
const searchtext = ref('')
const onInput = (e: any) => {
  console.log(e.detail.value, '搜索框')
  searchtext.value = e.detail.value
}

// 搜索结果的数组
const listjieguo = ref<any>([])
//监听搜索按钮
const clickSearch1 = async () => {
  //  小程序的输入键盘 收起来
  if (searchtext.value) {
    // loading状态
    uni.showLoading({
      title: '搜索中',
    })
    // 发送请求获取数据
    let res = await getsearchAPI({ neiron: searchtext.value, user: user.userinfo })
    console.log(res.data)
    searchtext.value = ''
    listjieguo.value = res.data
    // 隐藏loading
    uni.hideLoading()
    pduan.value = false
  } else {
    uni.showToast({
      title: '请输入搜索内容',
      icon: 'none',
    })
  }
}
// 返回搜索
const clickSearch11 = async () => {
  let res = await getsearchshequAPI({ user: user.userinfo, keyword: searchtext.value })
  console.log(res.data, '搜索历史数据')
  list.value = res.data
  pduan.value = true
}
//对按钮顶的判断
// follow
const follow = (index: number, index1: number) => {
  console.log('78787878787', index)
  console.log(listjieguo.value[index].isfollow, '21312312312321')

  listjieguo.value[index].isfollow = !listjieguo.value[index].isfollow
  console.log(listjieguo.value[index].isfollow, '54555555555')
}
// 对历史按钮进行点击搜索
const clickHistorySearch = (item: any) => {
  searchtext.value = item.keyword
  clickSearch1()
}
// 判断点赞等
//doSupport
const doSupport = (e) => {
  //
  let msg = e.type === 'support' ? '支持' : '不支持'
  // 如果用户已经支持了，就不能再点击   这里list报红是没有错误
  if (listjieguo.value[e.index].support.type === e.type) return
  // 如果之前已经支持了，按了不支持，就是支持减1，不支持加一
  if (listjieguo.value[e.index].support.type === 'support' && e.type === 'unsupport') {
    listjieguo.value[e.index].support.support_count--
    listjieguo.value[e.index].support.unsupport_count++
  } else if (listjieguo.value[e.index].support.type === 'unsupport' && e.type === 'support') {
    listjieguo.value[e.index].support.support_count++
    listjieguo.value[e.index].support.unsupport_count--
  } else {
    listjieguo.value[e.index].support[e.type + '_count']++
  }
  listjieguo.value[e.index].support.type = e.type
  // 点赞
  uni.showToast({
    title: msg + '成功',

    duration: 1000,
  })
  // list.value[e.index].support.type = e.type
  // list.value[e.index].support[e.type + '_count']++
}
onShow(async () => {
  let res = await getsearchshequAPI({ user: user.userinfo, keyword: searchtext.value })
  console.log(res.data, '搜索历史数据')
  list.value = res.data
})
</script>

<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
@import url('../../components/animate.min.css');

.lishi {
  padding-left: 20rpx;
  padding-right: 20rpx;
  font-size: 35rpx;
  // 颜色为灰色
  color: #858e98;
}
.jieguo {
  display: flex;
  flex-wrap: wrap;
}
.shuju {
  color: #81868b;
  padding-left: 20rpx;
  padding-right: 20rpx;
  border-width: 1rpx;
  border-style: solid;
  border-color: #858e98;
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 8rpx;
  font-size: 30rpx;
}
//点击后的样式
.yans {
  background-color: #dae0e5;
}
</style>
